<template>
  <div class="content2">
    <el-row v-for="(item, index) in moredata" :key="index">
      <el-col :span="4">
        <div class="content2_item">
          <div class="item hub_item">
            <div class="hub">{{ item.pk_ratio }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="content2_item">
          <div
            class="item"
            v-if="item.odds[0].nav_data != ''"
            @click="
              dialogStore.openNewDialog(
                homeState.matchDetail.primaryData,
                item.odds[0].pk_odds_key,
                item.pk_ratio,
                item.odds[0].pk_ratio,
                0
              )
            "
          >
            <div class="name">{{item.pk_type == 'OU' || item.pk_type == 'OUC' || item.pk_type == 'OUH' ? languageJson.home.over : languageJson.home.home}}</div>
            <div class="num">{{ item.odds[0].odd }}</div>
          </div>
          <div class="item" v-else>
            <div class="imgs">
              <img src="@/assets/lock.png" style="width: 20px; height: 20px" alt="" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="content2_item">
          <div
            class="item"
            v-if="item.odds[1].nav_data != ''"
            @click="
              dialogStore.openNewDialog(
                homeState.matchDetail.primaryData,
                item.odds[1].pk_odds_key,
                item.pk_ratio,
                item.odds[1].pk_ratio,
                1
              )
            "
          >
            <div class="name">{{item.pk_type == 'OU' || item.pk_type == 'OUC' || item.pk_type == 'OUH' ? languageJson.home.under : languageJson.home.away}}</div>
            <div class="num">{{ item.odds[1].odd }}</div>
          </div>
          <div class="item" v-else>
            <div class="imgs">
              <img src="@/assets/lock.png" style="width: 20px; height: 20px" alt="" />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="more flex">
      <div
        class="flex more_button AlibabaPuHuiTi_2_55_"
        v-if="handicap.ismore == true && more == 0"
        @click="clickmore()"
      >
        <div>{{languageJson.home.showMore}}</div>
        <img src="@/assets/home/zhankai2.png" style="widtyh: 8px; height: 8px; margin-left: 4px" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'

const { homeStore, homeState } = inject('HomeStore')
const { dialogStore, dialogState } = inject('DialogStore')
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const props = defineProps({
  data: Object,
})
const more = ref(0)

const handicap = computed(() => {
  let a = {
    alldata: props.data,
    data: [],
    ismore: false,
    more: 0, // 0：查看更多按钮显示   1：查看更多按钮隐藏
  }

  if (a.alldata.length > 3) {
    a.ismore = true
    a.more = 0
    if (more.value != 1) {
      more.value = 0
    }
    a.data = a.alldata.slice(0, 3)
  } else {
    a.data = JSON.parse(JSON.stringify(a.alldata))
  }
  if (more.value == 1) {
    a.data = JSON.parse(JSON.stringify(a.alldata))
    a.more = 1
    a.ismore = true
  }
  return a
})

const moredata = computed(() => {
  let a = []
  if (more.value == 0) {
    a = handicap.value.data
  } else {
    a = handicap.value.alldata
  }
  
  return a
})

const clickmore = () => {
  handicap.value.more = 1
  more.value = 1
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.content2_item {
  width: 100%;
  height: 40px;
  padding-right: 4px;
  margin-bottom: 4px;

  .item {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    align-items: center;
    cursor: pointer;

    .imgs {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .hub {
      font-size: 14px;
      font-weight: bold;
      color: #000;
    }

    .name {
      font-family: AlibabaPuHuiTi_2_55_;
      font-size: 14px;
      color: #000;
    }

    .num {
      font-family: DINAlternate;
      font-size: 14px;
      font-weight: bold;
      color: #3711d8;
    }
  }

  .hub_item {
    background-color: #eceffa;
    justify-content: center;
  }
}

.more {
  flex: 1;
  justify-content: center;
  align-items: center;
  margin: 4px 0;
}
.more_button {
  font-size: 12px;
  color: #666;
  align-items: center;
  cursor: pointer;
}
</style>